<template>
  <div>
    <CategorySelector></CategorySelector>
    <el-card>
      <SpuList v-if="showStatus===ShowStatus.SPU_LIST" @changeStatus="changeStatus" @getSpuInfo="saveSpuInfo"></SpuList>
      <SpuForm v-if="showStatus===ShowStatus.ADD_SPU" @changeStatus="changeStatus" :currentSpuInfo="currentSpuInfo"></SpuForm>
      <SkuForm v-if="showStatus===ShowStatus.ADD_SKU" :currentSpuInfo="currentSpuInfo"></SkuForm>
      <!-- <component :is=""></component> -->
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Spu'
});
</script>
<script lang="ts" setup>
import {ref} from 'vue'
import CategorySelector from '@/components/CategorySeletor/index.vue';
import SpuList from './components/SpuList.vue'
import SkuForm from './components/SkuForm.vue'
import SpuForm from './components/SpuForm.vue'
import { ShowStatus } from './types'

const showStatus = ref(ShowStatus.SPU_LIST)

const changeStatus = (val:number) => {
  showStatus.value = val
}

const currentSpuInfo = ref({
  spuName:'',//Spu名称
  category3Id:0,//三级id
  tmId:'',//spu品牌
  description:'',//spu描述
  spuImageList:[],//要上传的图片列表
  spuSaleAttrList:[],//销售属性
  spuSaleAttr:''//额外添加的属性 要来收集属性名
})

// 保存传递过来的spuInfo数据
const saveSpuInfo = (spuInfo)=>{
  currentSpuInfo.value = spuInfo
}


</script>

<style scoped>
</style>